<template>
	<view class="business-trip-container">
		<view class="form-section">
			<text class="form-title">出差申请</text>
			
			<view class="form-item">
				<text class="form-label">出差目的地</text>
				<input class="form-input" v-model="destination" placeholder="请输入出差目的地" />
			</view>

			<view class="form-item">
				<text class="form-label">出差开始时间</text>
				<picker mode="date" @change="onStartDateChange" :value="startDate">
					<view class="picker-input">
						<text>{{ startDate || '请选择开始日期' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">出差结束时间</text>
				<picker mode="date" @change="onEndDateChange" :value="endDate">
					<view class="picker-input">
						<text>{{ endDate || '请选择结束日期' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">出差天数</text>
				<view class="days-display">
					<text class="days-number">{{ calculateDays() }}</text>
					<text class="days-unit">天</text>
				</view>
			</view>

			<view class="form-item">
				<text class="form-label">出差事由</text>
				<textarea 
					class="form-textarea" 
					v-model="reason" 
					placeholder="请详细说明出差原因和工作安排"
					maxlength="300"
				></textarea>
			</view>

			<view class="form-item">
				<text class="form-label">预计费用</text>
				<input class="form-input" type="digit" v-model="estimatedCost" placeholder="请输入预计费用" />
			</view>
		</view>

		<view class="submit-section">
			<button class="submit-button" @tap="submitTrip" :disabled="!canSubmit()">
				提交申请
			</button>
		</view>

		<view class="records-section">
			<text class="section-title">我的出差记录</text>
			<view class="records-list">
				<view class="record-item" v-for="(record, index) in tripRecords" :key="index">
					<view class="record-header">
						<text class="record-destination">{{ record.destination }}</text>
						<text class="record-status" :class="record.status">{{ getStatusText(record.status) }}</text>
					</view>
					<view class="record-content">
						<text class="record-time">{{ record.startDate }} 至 {{ record.endDate }}</text>
						<text class="record-days">{{ record.days }}天</text>
					</view>
					<text class="record-reason">{{ record.reason }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const destination = ref('')
const startDate = ref('')
const endDate = ref('')
const reason = ref('')
const estimatedCost = ref('')

const tripRecords = ref([
	{
		destination: '北京',
		startDate: '2024-03-20',
		endDate: '2024-03-22',
		days: 3,
		reason: '参加技术交流会议',
		status: 'approved'
	},
	{
		destination: '上海',
		startDate: '2024-03-15',
		endDate: '2024-03-17',
		days: 3,
		reason: '客户拜访和项目洽谈',
		status: 'pending'
	}
])

const onStartDateChange = (e) => {
	startDate.value = e.detail.value
}

const onEndDateChange = (e) => {
	endDate.value = e.detail.value
}

const calculateDays = () => {
	if (!startDate.value || !endDate.value) return 0
	const start = new Date(startDate.value)
	const end = new Date(endDate.value)
	const diffTime = Math.abs(end - start)
	const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1
	return diffDays > 0 ? diffDays : 0
}

const canSubmit = () => {
	return destination.value && startDate.value && endDate.value && reason.value.trim()
}

const submitTrip = () => {
	if (!canSubmit()) {
		uni.showToast({
			title: '请完善申请信息',
			icon: 'none'
		})
		return
	}
	
	uni.showLoading({ title: '提交中...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '申请提交成功',
			icon: 'success'
		})
		// 清空表单
		destination.value = ''
		startDate.value = ''
		endDate.value = ''
		reason.value = ''
		estimatedCost.value = ''
	}, 2000)
}

const getStatusText = (status) => {
	const statusMap = {
		'pending': '审批中',
		'approved': '已通过',
		'rejected': '已拒绝'
	}
	return statusMap[status] || '未知'
}
</script>

<style scoped>
.business-trip-container {
	padding: 32rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.form-section {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 32rpx;
	display: block;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-label {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.picker-input, .form-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
}

.form-input {
	width: 100%;
}

.picker-arrow {
	color: #999;
	font-size: 32rpx;
}

.days-display {
	display: flex;
	align-items: baseline;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
}

.days-number {
	font-size: 48rpx;
	font-weight: bold;
	color: #2B5BA1;
	margin-right: 8rpx;
}

.days-unit {
	font-size: 28rpx;
	color: #666;
}

.form-textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
	line-height: 1.5;
}

.submit-section {
	margin-bottom: 32rpx;
}

.submit-button {
	width: 100%;
	background: #2B5BA1;
	color: white;
	border: none;
	border-radius: 12rpx;
	padding: 32rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.submit-button[disabled] {
	background: #ccc;
}

.records-section {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 24rpx;
	display: block;
}

.record-item {
	padding: 24rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
	border-bottom: none;
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.record-destination {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.record-status {
	font-size: 28rpx;
}

.record-status.pending {
	color: #ff9800;
}

.record-status.approved {
	color: #4caf50;
}

.record-status.rejected {
	color: #f44336;
}

.record-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.record-time {
	font-size: 28rpx;
	color: #666;
}

.record-days {
	font-size: 28rpx;
	color: #2B5BA1;
	font-weight: 500;
}

.record-reason {
	font-size: 28rpx;
	color: #999;
}
</style> 